<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSX虚拟DOM和真实DOM的区别</title>
</head>
<body>
    <div id="test"></div>
    <div id="demo"></div>
    <script src="js/16.8/react.development.js"></script>
    <script src="js/16.8/react-dom.development.js"></script>
    <script src="js/16.8/babel.min.js"></script>
    <script type="text/babel">
        //创建虚拟DOM
        const VDOM = (
            <h1>hello</h1>
        )
        // console.log(typeof VDOM);//虚拟DOM类型：object
        // console.log(VDOM instanceof Object);
        console.log('虚拟DOM：'+VDOM);
        //创建真实DOM
        const TDOM = document.getElementById('demo');
        console.log('真实DOM：'+TDOM);
        //通过debug获取到 真实DOM比虚拟DOM ‘重’
        debugger
        ReactDOM.render(VDOM,document.getElementById('test'));
    </script>
</body>
</html>